<template>
  <div>
    <el-col :span="24">

      <el-row>
        <div align="center"><h1>创建密钥</h1></div>
      </el-row>

      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="22"><div class="grid-content">
          <h2>设置密钥长度</h2>
          <h4>密钥长度是指模值的位长度。主流可选值：1024、2048...，低于1024bit的密钥安全问题已经不建议使用</h4>
          <h4>数值越大，计算时间越长，建议使用1024</h4>
        </div></el-col>
      </el-row>


      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="13"><div class="grid-content">
           <!-- <el-input v-model="msg"  type="text"    placeholder="请输入内容" /> -->
          <el-select v-model="value" placeholder="请选择" style="width:40%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div></el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="13"><div class="grid-content">
          <el-button type="primary" style="width:20%" icon="el-icon-top" @click="sumbit">创建密钥</el-button>
        </div></el-col>
      </el-row>

<div v-show="play">
      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="20"><div class="grid-content">
          <h2>密钥信息</h2>

          <h4>私钥:</h4>
                  <el-input
          type="textarea"
          :rows="8"
          placeholder="请输入内容"
          :readonly="true"
          v-model="textarea">
        </el-input>
    <br>
          <h4>公钥:</h4>
                  <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          :readonly="true"
          v-model="textarea1">
        </el-input>
        </div>
        </el-col>
      </el-row>
</div>


    </el-col>
  </div>

</template>

<script>
import { creatersa } from '@/api/query'

export default {
  data() {
    return {
      textarea: '',
      textarea1: '',
      play: false,
      options: [{
                value: '512',
                label: '512'
              }, {
                value: '1024',
                label: '1024'
              }, {
                value: '2048',
                label: '2048'
              }],
              value: '1024'
          }
  },

  // computed:{
  //       GetUser(){
  //           console.log(this.$store.state.user.token)
  //           return this.$store.state.user.token
  //       }
  //   },
  // created() {    
  //   this.sumbit()  
  // },
	methods: {
    sumbit() {
      this.play = true
      this.textarea = "处理中"
      this.textarea1 = "处理中"
      creatersa({ 'num': this.value }).then(response => {
        console.log(response.data)
        this.textarea = response.data.private
        this.textarea1 = response.data.public
      })
    },
  }
}
</script>

<style scoped>
.el-col {
  min-height: 1px
}
</style>
